<style scoped lang="less">
	@import "Submit";
</style>
<template>
	<div v-if="goodsData!=null">
		<div class="goods-info-wrap">
			<van-image class="good-img" :src="GLOBAL.getUrl(goodsData.banners[0])"></van-image>
			<div class="goods-info-right">
				<div class="good-title">{{goodsData.title}}</div>
				<div class="sku-wrap">
					<span class="sku-title">{{goodsData.sku[skuIndex].title}}</span>
					<div class="good-price-wrap">
	          <span class="good-price-num">
	            <span class="symbol">￥</span>
	            {{goodsData.type===GLOBAL.ACTIVE_TYPE_KJ&&kjData!=null?kjData.current_price/100:(goodsData.sku[skuIndex].lowest_price+0.0)/100}}
	          </span>
						<span class="good-num-count">
	            x 1
	          </span>
					</div>
				</div>
			
			</div>
		</div>
		<div class="user-info">
			<van-cell-group>
				<van-field
					v-model="username"
					label="姓名"
					placeholder="请输入姓名"
				></van-field>
				<van-field
					v-model="phone"
					label="手机号"
					placeholder="请输入手机号"
				></van-field>
				<van-field
					v-model="remark"
					label="备注"
					placeholder="有什么要求可以写下来哦"
				></van-field>
			</van-cell-group>
		</div>
		<div class="discount-info" v-if="userInfo.type===GLOBAL.USER_TYPE_VIP&&goodsData.sku[skuIndex].vip_discount>0">
			<div class="discount-item">
				<span class="item-title">VIP优惠</span>
				<span class="item-content">-{{(goodsData.sku[skuIndex].vip_discount+0.0)/100}}</span>
			</div>
		</div>
		<div class="pay-info">
			<div class="pay-item">
				<span class="item-title">使用余额</span>
				<van-switch active-color="#EC414D" size="0.35rem" v-model="useBalance"/>
			</div>
		</div>
		<van-submit-bar
			:loading="loading"
			:price="price"
			button-text="提交订单"
			:safe-area-inset-bottom="true"
			@submit="onSubmit"></van-submit-bar>
	</div>
</template>
<script>
  import Vue from 'vue';
  import axios from '@/libs/api.request';
  import {SubmitBar, Field, CellGroup, Image, Switch} from 'vant';
  import {checkPhoneNum, isNull} from '@/libs/util';
  import {getSampleDetail} from "../../api/goods";
  import {createOrder} from "../../api/order";
  import {getKanJiaOrder} from "../../api/kanjia";
  import {getUserInfo} from "../../api/user";
  import {Toast} from 'vant';

  Vue.use(SubmitBar).use(Field).use(CellGroup).use(Image).use(Switch);
  export default {
    name: 'Submit',
    data() {
      return {
        id: null,
        useBalance: true,
        kanJiaOrderId: null,
        skuId: null,
        remark: null,
        username: null,
        phone: null,
        skuIndex: 0,
        goodsData: null,
        kjData: null,
        userInfo: null,
        loading: false,
        price: 0
      };
    },
    created() {
      let id = this.$route.params.id;
      let skuId = this.$route.params.skuid;
      let kanJiaOrderId = this.$route.query.kanjia_order_id;
      this.kanJiaOrderId = kanJiaOrderId;
      if (id && skuId) {
        this.id = id;
        this.skuId = skuId;
        let vm = this;
        axios.all([getUserInfo(), getSampleDetail({id: this.id}), !isNull(kanJiaOrderId) ? getKanJiaOrder(kanJiaOrderId) : null])
          .then(axios.spread((userInfo, goodsInfo, kanJiaOrderInfo) => {
            vm.userInfo = userInfo.data.data;
            vm.goodsData = goodsInfo.data.data;
            vm.goodsData.banners = JSON.parse(vm.goodsData.banners);
            for (let i = 0; i < vm.goodsData.sku.length; i++) {
              if (vm.goodsData.sku[i].id == vm.skuId) {
                vm.skuIndex = i;
              }
            }
            if (kanJiaOrderInfo != null) {
              vm.kjData = kanJiaOrderInfo.data.data;
              //抢购的价
              vm.price = kanJiaOrderInfo.data.data.current_price - (vm.userInfo.type === vm.GLOBAL.USER_TYPE_VIP ? vm.goodsData.sku[vm.skuIndex].vip_discount : 0);
            } else {
              //总价是sku的最低价，这里写抢购
              vm.price = vm.goodsData.sku[vm.skuIndex].lowest_price - (vm.userInfo.type === vm.GLOBAL.USER_TYPE_VIP ? vm.goodsData.sku[vm.skuIndex].vip_discount : 0);
            }

          }));
      } else {
        Toast.fail('无效的id');
      }
    },
    methods: {
      onSubmit() {
        if (isNull(this.username)) {
          Toast('请输入联系人姓名');
          return;
        }
        if (!checkPhoneNum(this.phone)) {
          Toast('请输入正确的手机号');
          return;
        }
        let vm = this;
        vm.loading = true;
        //这里要预留一下方便以后拓展订单，数据为数组格式
        let data = {
          goods_info: [{goods_id: vm.id, sku_id: vm.skuId, count: 1}],
          user_info: {user_name: vm.username, user_phone: vm.phone, remark: vm.remark},
          use_balance: vm.useBalance ? 1 : 0,
          order_type: vm.goodsData.type
        };
        if (vm.kanJiaOrderId !== null) {
          data.kj_order_id = vm.kanJiaOrderId;
        }
        if (this.$route.params.invid !== undefined && this.$route.params.invid !== null) {
          data.invid = this.$route.params.invid;
        }
        createOrder(data).then(rep => {
          vm.loading = false;
          if (rep.data.data.need_to_wxPay) {
            vm.$router.push({name: 'pay', params: {order_id: rep.data.data.order_id}});
          } else {
            if (vm.goodsData.type === vm.GLOBAL.ACTIVE_TYPE_VIP) {
              vm.$router.push({name: 'vip-pay-result', params: {order_id: rep.data.data.order_id}});
            } else {
              vm.$router.push({name: 'pay-result', params: {order_id: rep.data.data.order_id}});

            }
          }
        }, error => {
          vm.loading = false;
        });
      }

    }
  };
</script>